<template>
  <div class="file_list" v-if="isShow">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">文件</el-menu-item>
      <el-menu-item index="2">图片及视频</el-menu-item>
      <el-menu-item index="3">链接</el-menu-item>
    </el-menu>
    <span class="iconfont icon-fork" @click="isShow=false"></span>
    <div v-if="activeIndex==1" class="content">
      <h1>文件保留180天，如需永久保存请存入云盘</h1>
      <ul>
        <li v-for="item in list" :key="item.id" class="flex_box file_item">
          <span class="iconfont icon-wenjianjia"></span>
          <div class="flex1">
            <span class="filename">{{item.filename}}</span>
            <p>
              <span>{{item.fileSize}}</span>
              <span>{{item.time}}</span>
              <span>{{item.name}}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div v-else-if="activeIndex==2" class="content">
      <div class="img_list" v-for="item in imgList" :key='item.id'>
        <p class="time">{{item.time}}</p>
        <div class="imgs">
          <el-image
            v-for="(item1,index) in item.children"
            :key='index'
            style="width: 100px; height: 100px;margin:0 10px 10px 0"
            :src="item1" 
            :preview-src-list="[item1]">
          </el-image>
        </div>
      </div>
    </div>
    <div v-else-if="activeIndex==3" class="content">
      <div class="nodata">
        <p>暂无聊天链接</p>
        <span>聊天中分享的链接会自动保存到这里</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow:false,
      activeIndex:'1',
      list:[
        {
          id:1,
          filename:'aaa.doc',
          fileSize:'612.2k',
          time:'2020/06/28 14:27',
          name:'宋春波'
        },
        {
          id:2,
          filename:'bbb.doc',
          fileSize:'13.2k',
          time:'2020/06/28 15:27',
          name:'宋春波'
        }
      ],
      imgList:[
        {
          id:1,
          time:'2020/06/28 15:27',
          children:[
            require('@/assets/images/icon7.png')
          ]
        },
        {
          id:2,
          time:'2020/06/28 15:27',
          children:[
            require('@/assets/images/icon7.png'),
            require('@/assets/images/icon7.png')
          ]
        }
      ]
    }
  },
  methods:{
    show() {
      this.isShow = true
    },
    hide() {
      this.isShow = false
    },
    handleSelect(val) {
      console.log(val)
      this.activeIndex = val
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/stylus/variable'
  .file_list
    position absolute
    right: 0
    top 0
    z-index: 9
    border 1px solid #eee
    border-radius: 4px
    background: #fff
    width: 500px
    height: 100%
    padding 10px
    box-shadow: 0 0 8px 2px rgba(0,0,0,.1)
    box-sizing border-box
    .icon-fork
      position: absolute
      right 20px
      top 30px
      font-size 20px
      color #999
      cursor pointer
    h1
      color #999
      line-height: 40px
      font-size 12px
      border-bottom 1px solid #eee
    .content
      height: calc(100% - 62px)
      overflow-y: auto
    .file_item
      padding 10px
      color #999
      font-size 12px
      .iconfont
        font-size 30px
        color $theme-color
        margin-right 10px
      .filename
        font-size 14px
        line-height 30px
        color #333
    .time
      line-height: 40px
      clor #999
      font-size 14px
    .nodata
      height: 100%
      display: flex
      flex-direction: column
      align-items: center
      justify-content: center
      font-size 12px
      line-height 30px
      text-align: center
      color #999
      p
        font-size 16px
</style>